<template>
  <el-dialog
    class="dialog"
    :title="isEdit ? '修改年级' : '添加年级'"
    :visible.sync="dialogVisible"
    width="40%"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="handleClose"
  >
    <el-form
      ref="form"
      :model="form"
      label-width="100px"
      :rules="rules"
    >
        <el-form-item prop="gradeName" label="年级名称:">
          <el-input
            style="width: 70%"
            clearable
            placeholder="请输入年级名称"
            v-model="form.gradeName"
          ></el-input>
        </el-form-item>
        <el-form-item prop="gradeName" label="年级:">
          <el-select v-model="form.gradeCode" placeholder="请选择年级">
            <el-option
              v-for="item in options"
              :key="item.code"
              :label="item.name"
              :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose()">取 消</el-button>
      <el-button
        size="small"
        :loading="isLoading"
        type="primary"
        @click="submit()"
      >确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import { gradeAdd } from '@/api/school/grade'
export default {
  data() {
    return {

      isLoading: false,
      form: {
        gradeId: null,
        gradeName:"",
        gradeCode:""
      },
      rules:{
        gradeName: [
          {
            required: true,
            message: "请输入年级名称",
          },
        ],
        gradeCode: [
          {
            required: true,
            message: "请输入年级名称",
          },
        ],
      },
      options:[
        {
          name:"一年级",
          code:"1"
        },
        {
          name:"二年级",
          code:"2"
        },
        {
          name:"三年级",
          code:"3"
        },
        {
          name:"四年级",
          code:"4"
        },
        {
          name:"五年级",
          code:"5"
        },
        {
          name:"六年级",
          code:"6"
        },
        {
          name:"七年级",
          code:"7"
        },
        {
          name:"八年级",
          code:"8"
        },
        {
          name:"九年级",
          code:"9"
        },
        {
          name:"高一",
          code:"10"
        },
        {
          name:"高二",
          code:"11"
        },
        {
          name:"高三",
          code:"12"
        },
      ]
    };
  },

  props: {
    isEdit: {
      type: Boolean,
      default: false,
    },
    item: {
      type: Object,
      default: {},
    },
    dialogVisible: {
      type: Boolean,
    },
  },
  watch: {
    isEdit: {
      immediate: true,
      handler(newVal) {
        if (newVal) {
          this.form.gradeId = this.item.gradeId;
          this.form.gradeName = this.item.gradeName;
          this.form.gradeCode = this.item.gradeCode;
        }
      },
    },
  },
  methods: {
    submit() {
      this.$refs.form.validate((e) => {
        this.isLoading = true;
        gradeAdd(this.form).then(response=>{
          this.isLoading = false
          if(response.code == 200){
            this.$message.success("操作成功");
            this.$emit("submit",false);
            this.handleClose();
          }else{
            this.$message.error(response.message)
          }
        })
      });
    },
    handleClose(){
      this.$emit("close",false)
    }
  },
};
</script>
<style lang="scss" scoped>
.common {
  display: flex;
  justify-content: space-between;
  width: 100%;
  .el-form-item {
    flex: 1;
  }
}
::v-deep .el-dialog {
  margin-top: 8vh !important;
}
.el-icon-circle-plus-outline {
  margin-left: 20px;
  &::before {
    font-size: 24px;
    color: #409eff;
  }
}
.el-icon-delete {
  margin-left: 20px;
  &::before {
    font-size: 24px;
    color: #f56c6c;
  }
}
::v-deep .el-upload-list__item {
  display: none;
}
::v-deep .el-upload--text {
  width: 100%;
}
::v-deep .el-upload-dragger {
  width: 70%;
}
::v-deep .el-form {
  padding-left: 60px;
}
</style>
